$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;
  .section1{
    width: 80vw;
    margin: 8vw auto 4vw auto;
    display: flex;
    align-items: center;
    .tags{
      display: flex;
      p {
        border-radius: 30px;
        background: #F5F5F5;
        font-size: $fontSize_14;
        color:#000;
        padding: 0.3vw 1.3vw 0.4vw 1.3vw;
        margin-right: 0.5vw;
      }
    }
    .time{
      display: flex;
      margin-left: 3vw;
      align-items: center;
      p{
        font-size: $fontSize_16;
      }
      span{
        display: block;
        width: 6/19.2+vw;
        height:  6/19.2+vw;
        background-color: #000;
        border-radius: 50%;
        margin: 0 10px;
      }
    }
  }

  .section2{
    width: 80vw;
    margin: 4vw auto;
    .pic {
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      height: 50.97vw;
      img {
        width: 100%;
        display: block;
        border-radius: 20px;
        height: 41.67vw;
        position: relative;
        top: -10%;
        object-fit: cover;
      }

      .hover {
        position: absolute;
        right: 0;
        top: 0;
        background-color: white;
        padding: 0.8vw 0.8vw;
        border-bottom-left-radius: 1.5vw;
        transition-property: transform;
        transition-timing-function: cubic-bezier(.135,.9,.15,1);
        transition-duration: .9s;
        width: 35vw;
        svg {
          width: 3vw;
          position: absolute;
          path {
            fill: #fff;
          }
        }
        .svg1{
          top:0;
          left: -2.9vw;
        }
        

        .tags {
          color: #000;
          font-size: $fontSize_40;
          font-weight: 600;
        }
      }
    }
  }

  .section3{
    width: 80vw;
    margin: 0 auto;
    font-size: $fontSize_16;
    img{
      max-width: 100%;
    }
  }


  .section5 {
    width: 100%;
    position: relative;

    .bg {
      img {
        width: 100%;
      }
    }

    .text {
      position: absolute;
      bottom: 35%;
      left: 0;
      width: 100%;
      text-align: center;
      color: #000;
      font-size: $fontSize_40;
    }

    .btn {
      position: absolute;
      left: 50%;
      bottom: -.8vw;
      transform: translateX(-50%);

      .ball {
        width: 133/19.2+vw;
        height: 133/19.2+vw;
      }

      .en {
        img {
          width: 121/19.2+vw;
          height: 121/19.2+vw;
          animation: spin 14s linear infinite;
        }
      }

      @keyframes spin {
        100% {
          transform: rotate(1turn);
        }
      }

      .en,
      p {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      p {
        color: white;
        font-size: $fontSize_18;
      }

      .icon {
        position: absolute;
        right: 30/19.2+vw;
        top: 30/19.2+vw;
        width: 24/19.2+vw;
        height: 24/19.2+vw;
      }
    }
  }



  @media screen and (max-width: 1024px) {
    padding-top: 90px;

    .section1{
      width: 90%;
      margin: 0 auto;
      flex-direction: column;
      .tags{
        p{
          font-size: 14px;
          padding: 5px 15px;
          margin-right: 10px;
        }
      }
      .time{
        margin-left: 0;
        margin-top: 15px;
        p{
          font-size: 16px;
        }
        span{
          width: 4px;
          height: 4px;
        }
      }
    }

    .section2{
      width: 90%;
      margin: 30px auto;
      .pic{
        height: 300px;
        border-radius: 10px;
        img{
          height: 400px;
          border-radius: 10px;
          top:-100px;
        }
        .hover{
          width: 70%;
          .tags{
            font-size: 16px;
          }
        }
      }
    }

    .section3{
      width: 90%;
      font-size: 16px;
      margin-bottom: 40px;
    }

    .section5{
      margin-bottom: 30px;
      .text{
        font-size: 16px;
        bottom:40%;
      }
      .btn{
        bottom:-30px;
        .ball{
          width: 60px;
          height: 60px;
        }
        .en{
          img{
            width: 55px;
            height: 55px;
          }
        }
        .icon{
          width: 15px;
          height: 15px;
          right:10px;
          top:10px; 
          display: none;
        }
        p{
          font-size: 12px;
        }
      }
    }
  }
}

